<template>
    <el-container class="bg_img">
        <el-main class="bg_size">
            <h1 class="ZC">注册用户</h1>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" label-position="left" label-width="120px">

                <el-row>
                    <el-col :span="8" :offset="8">
                        <el-form-item label="用户名" prop="accountname" class="item">
                            <el-input v-model="ruleForm.accountname" placeholder="请输入用户名" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8" :offset="8">
                        <el-form-item label="用户真实姓名" prop="name" class="item">
                            <el-input v-model="ruleForm.name" placeholder="请输入用户真实姓名" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row>
                    <el-col :span="8" :offset="8">
                        <el-form-item label="密码" prop="password" class="item">
                            <el-input v-model="ruleForm.password" placeholder="请输入密码" type="password" show-password clearable />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8" :offset="8">
                        <el-form-item label="确认密码" prop="commitpassword" class="item">
                            <el-input v-model="ruleForm.commitpassword" placeholder="请确认密码" type="password" show-password clearable @blur="check()"/>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8" :offset="8">
                        <el-form-item label="性别" prop="sex" :formatter="formatterGender" class="item">
                            <el-radio-group v-model="ruleForm.sex" >
                                <el-radio label="男" :formatter="formatterGender"></el-radio>
                                <el-radio label="女" :formatter="formatterGender"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8" :offset="8">
                        <el-form-item label="电话号码" prop="phone"  class="item">
                            <el-input v-model="ruleForm.phone" placeholder="请填写电话号码"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="4" :offset="10" class="msg">
                        <span class="msg">{{msg}}</span>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="2" :offset="9">
                        <el-form-item>
                            <el-button type="primary"  text bg><router-link to="/" target="_self">返回登录</router-link></el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-form-item>
                            <el-button type="primary"  text bg @click="register()">注册</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                
            </el-form>
        </el-main>
    </el-container>
</template>

<script>
import axios from 'axios'
import qs from 'querystring'

export default {
    name:"RegisterVue",
    data(){
        return{
            ruleForm: {
                accountname: '',
                name:'',
                password: '',
                commitpassword:'',
                phone:'',
                sex:''
            },
            rules: {
                accountname: [{
                    required: true,
                    message: '用户名不能为空',
                    trigger: 'blur'
                }, {
                    min: 2,
                    max: 5,
                    message: '长度在 2 到 5 个字符',
                    trigger: 'blur'
                }],
                name: [{
                    required: true,
                    message: '姓名不能为空',
                    trigger: 'blur'
                }, {
                    min: 2,
                    max: 5,
                    message: '您的姓名应该在 2 到 5 个字符',
                    trigger: 'blur'
                }],
                password: {
                    required: true,
                    min: 6,
                    max: 10,
                    message: '密码默认为111111,长度在 6 到 10 个字符',
                    trigger: 'blur'
                },
                commitpassword:{
                    required: true,
                    message: '确认密码不能为空',
                    trigger: 'blur'
                },
                phone: [{
                    required: true,
                    message: '请输入电话号码',
                    trigger: 'blur'
                },
                {
                    min: 11,
                    max: 11,
                    message: '长度为 11 个字符',
                    trigger: 'blur'
                }],
                sex: [{
                    required: true,
                    message: '请选择性别',
                    trigger: 'blur'
                }]
            },
            msg:''
        }
    },
    methods: {
        check(){
            let password = this.ruleForm.password;
            let commitpassword = this.ruleForm.commitpassword;
            if(password != commitpassword && commitpassword != ''){
                this.msg='密码输入不同，请重新输入';
            }
        },
        register(){
            this.$refs['ruleForm'].validate((valid)=> {
                 let formdata = this.ruleForm;
                 const that = this;
                 axios.post("http://localhost:8080/library/register",
                            qs.stringify(formdata),
                            {
                                headers:{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'}
                            }).then(function(response){
                                console.log(response);
                                if(response.data.code == 1){
                                    window.alert("注册成功"); 
                                    that.$router.push('/')
                                }else{
                                    window.alert("失败");
                                    // formdata={};
                                    that.$router.push('/RegisterVue')
                                }
                                }).catch((error) => {
                                console.log(error)
                                })
                        })
        }
    },
}
</script>

<style scoped>
    .ZC{
        margin-left: 49%;
        color: rgb(150, 172, 192);
    }

    .msg{
        color: red;
        margin-bottom: 15px;
    }

    .bg_img{
      background-image: url(../img/zhuche.jpg);
      background-size: 100% 100%;
      background-repeat: no-repeat; 
     
    }

    .bg_size{
        margin-top: 100px;
        margin-bottom: 145px;
    }

    .item .el-form-item__label{
        color: rgb(64,158,255);
    }

</style>